<template>
	<view class="content">
		<navbarVue icon="arrow-left" title="添加副本记录"></navbarVue>
		
		<view class="form-frame">
			<uv-form labelPosition="left" :model="form" ref="form" label-width="80">
				<uv-form-item label="副本" prop="name" borderBottom>
					<uni-data-select
					  v-model="form.copyName"
					  :localdata="copyRange"
					  @change="change"
					  placeholder="选择副本"
					></uni-data-select>
				</uv-form-item>
				<uv-form-item label="副本掉落" prop="name" borderBottom>
					<view 	v-for="(item, index) in copyDrops" 
							@click="selectCopyDrops(item)"
							class="drops-item">
						<view class="flex-row-a-center">
							<image :src="imageUrl + item.dropsUrl" class="drops-img" mode=""></image>
							{{ item.dropsName }}
						</view>
						<view class="checked-frame">
							<uv-icon 	name="checkbox-mark" 
										size="16"
										v-if="item.checked"
										color="#53c21d"></uv-icon>
						</view>
					</view>
				</uv-form-item>
				<uv-form-item label="玄晶" prop="copyXuanJing" borderBottom>
					<uv-input v-model="form.copyXuanJing" placeholder="请填写掉落玄晶数量">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="工资" prop="copyWages" borderBottom>
					<uv-input v-model="form.copyWages" placeholder="请填写工资">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="消费" prop="copyUse">
					<uv-input v-model="form.copyUse" placeholder="请填写消费">
					</uv-input>
				</uv-form-item>
				<uv-button type="primary" text="提交" customStyle="margin-top: 10px" @click="submit"></uv-button>
			</uv-form>
		</view>
	</view>
</template>

<script>
	import navbarVue from '@/components/navbar.vue';
	import { BASEURL } from '@/utils/const.js'
	export default {
		components: {
			navbarVue
		},
		data() {
			return {
				imageUrl: BASEURL,
				form: {
					copyName: '', // 副本名称
					copyWages: 0, // 副本工资
					copyUse: 0, // 副本消费
					copyXuanJing: 0, // 玄晶数量
					copySpecial: 0, // 特殊数量
					copyDrops: [], // 特殊掉落
				},
				copyRange: [],
				copyDrops: []
			}
		},
		mounted() {
			this.getCopyRange()
		},
		methods: {
			// 重置
			reset() {
				this.copyDrops = []
				this.form = {
					copyName: '', // 副本名称
					copyWages: 0, // 副本工资
					copyUse: 0, // 副本消费
					copyXuanJing: 0, // 玄晶数量
					copyDesc: '', // 副本描述
					copySpecial: 0, // 特殊数量
					copyDrops: [], // 特殊掉落
				}
			},
			// 获取副本列表
			getCopyRange() {
				this.$api.get('/jx3/copys/list').then(res => {
					for(let i of res.rows) {
						i.value = i.copyName
						i.text = i.copyName
					}
					this.copyRange = res.rows
				})
			},
			// 提交
			submit() {
				if(!this.form.copyName) {
					this.$msg.msg('请选择副本')
					return
				}
				uni.showModal({
					title: '提示',
					content: '确认提交',
					success: (res) => {
						if(res.confirm) {
							let data = this.$methods.deepClone(this.form)
							let copyDrops = []
							for(let i of this.copyDrops) {
								if(i.checked) {
									copyDrops.push(i)
								}
							}
							data.copyDrops = copyDrops
							this.$api.post('/jx3/copyRecord/add', data).then(res => {
								console.log(res)
								if(res.code == 200) {
									this.$msg.msg('添加记录成功')
									this.reset()
								}
							})
						}
					}
				})
			},
			change(e) {
			  for(let i of this.copyRange) {
				  if(e === i.copyName) {
					  this.form.copyDesc = i.copyDesc
					  if(i.copyDrops) {
						  let copyDrops = JSON.parse(i.copyDrops) || []
						  for(let i of copyDrops) {
							  i.checked = false
						  }
						  this.copyDrops = copyDrops
					  }
					  break;
				  }
			  }
			},
			// 选择掉落
			selectCopyDrops(item) {
				item.checked = !item.checked
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		overflow: hidden;
	}
	
	.form-frame {
		margin: 30rpx;
		.drops-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx;
			margin-bottom: 5px;
			border-radius: 4px;
			color: #fff;
			background: linear-gradient(to right bottom, #7560a2, #22203a);
			.drops-img {
				width: 30px;
				height: 30px;
				display: block;
				padding-right: 30rpx;
			}
			.checked-frame {
				width: 20px;
				height: 20px;
				background-color: #fff;
				border-radius: 4px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>
